<!DOCTYPE HTML>
<html>
<head>
<title>My Story</title>

<link rel="stylesheet" href="jquery.mobile-1.1.0.min.css">
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>

<script type="text/javascript" charset="utf-8" src="jquery-1.7.1.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="jquery.mobile-1.1.0.min.js"> </script>
</head>
<body>
	<script type="text/javascript">
	 $(document).ready(function(){
		 $("#dialogLoad").click(function () {
			 $.ajax({
		    url: 'http://10.84.5.134:8080/mestory/rest/get',
		    type: 'GET',
		    dataType: "xml",
		    data: '', 
		    success: function(xml) {
				$story = $(xml).find('story');
				//alert($story.find("name").text());
				$("#dialogStoryContent").html("<p>" + $story.find("name").text() + "</p>");
				},
			 error: function(xhr, ajaxOptions, thrownError) {
					$("#dialogStoryContent").append("<p>Error: " + xhr.status + "," + thrownError + "</p>");
					}
			}); 
			 });
	 });
 </script>
	<div data-role="page" id="mys_options">
		<div data-role="header">
			<h1>My Story</h1>
		</div>
		<div data-role="content">
			<h3>Options</h3>
			<p>
				<a href="#dialog" data-rel="dialog" data-transition="pop"
					data-role="button">Select Story </a>
			</p>
		</div>
		<div data-role="footer">
			<div data-role="navbar">
				<ul>
					<li><a href="#mys_options" data-iconpos="top" data-icon="home">Options
					</a></li>
					<li><a href="#mys_story" data-iconpos="top" data-icon="home">Story
					</a></li>
				</ul>
			</div>
		</div>
	</div>
	<div data-role="page" id="mys_story">
		<div data-role="header">
			<h1>My Story</h1>
		</div>
		<div data-role="content">
			<h3>Story 1</h3>
		</div>
		<div data-role="footer">
			<div data-role="navbar">
				<ul>
					<li><a href="#mys_options" data-iconpos="top" data-icon="home">Options
					</a></li>
					<li><a href="#mys_story" data-iconpos="top" data-icon="home">Story
					</a></li>
				</ul>
			</div>
		</div>
	</div>
	<div data-role="page" id="dialog">
		<div data-role="header">
			<h2>Select Story</h2>
		</div>
		<div data-role="content" id="dialogStoryContent">
		</div>
		<div data-role="content">
			<div  data-rel="back" data-role="button" id="dialogLoad">Load</div >
			<a href="#mys_options" data-rel="back" data-role="button">Close </a>
		</div>
	</div>
</body>
</html>